<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webGL</title>
</head>
<body>
  <div class="webGl_wrap">
    <h1>webGL</h1>
    <canvas id="webGL_ID" width="400" height="400" style="border: 1px solid;"></canvas>
  </div>
  <script src="../node_modules/jquery/dist/jquery.min.js"></script>
  <!-- <script type="markdown" id="vertex">
    GLSL 变量声明:    
    1. 存储限定符 类型 变量名
    1.1 attribute vec4 a_Position (attribute 变量的声明（局部数据）)
    1.2 uniform vec4 u_FragColor (uniform 变量的声明（全局数据）)

    void main () {

    }

  </script> -->

  <script type="notjs" id="vertex">
    void main() {
      gl_Position = vec4(0.0, 0.0, 0.0, 0.0);
      gl_PointSize = 10.0;
    }
  </script>
  <script type="notjs" id="fragment">
    void main() {
      gl_FragColor = vec4(0, 0, 1.0, 1.0);
    }
  </script>

  <script>
    const canvas = document.getElementById('webGL_ID')
    const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl')
    if (!gl) {
      alert('不支持 webGL')
    }
    
    /**
     * 创建着色器：gl.createShader(type)
     * 顶点着色器：Vertext shader，gl.VERTEXT_SHADER
     * 片元着色器：Fragment shader，gl.FRAGMENT_SHADER
     * 
     * 向着色器中添加资源：gl.shaderSource(shader, source)
     * shader: 着色器
     * source: 添加的程序
     * 
     * 编译着色器代码：gl.compileShader(shader)
     * shader: 要编译的着色器
     */

    // 创建着色器函数
    const createShader = (gl, type, sourceStr) => {
      const shader = gl.createShader(type)
      // console.log('shader', shader, sourceStr)
      // 向着色器中添加资源
      gl.shaderSource(shader, sourceStr)
      // 编译着色器代码
      gl.compileShader(shader)
      // 判断编译是否成功
      const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS)
      if (success) return shader
      console.log(gl.getShaderInfoLog(shader))
    }
    
    // 获取 GLSL 字符串
    const vertexStr = document.getElementById('vertex').innerText;
    const fragmentStr = document.getElementById('fragment').innerText;
    // console.log('vertexStr ---', vertexStr, 'fragmentStr ---', fragmentStr)
    // 调用
    const vertextShader = createShader(gl, gl.VERTEX_SHADER, vertexStr)
    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentStr)
    console.log('fragmentShader', fragmentShader)
    /** 
     * 创建程序将两个着色器连接起来
     * 创建程序：gl.createProgram()
     * 绑定着色器程序：
     *  gl.attachShader(program, shader)
     *  program: 被插入的程序
     *  shader: 要绑定的着色器
     * 连接着色器程序：gl.linkProgram(program)
     */
    const createProgram = (gl, vertextShader, fragmentShader) => {
      // 创建空程序
      const program = gl.createProgram()
      // 绑定着色器程序
      gl.attachShader(program, vertextShader)
      gl.attachShader(program, fragmentShader)
      // 连接着色器程序
      gl.linkProgram(program)
    }
    
    console.log('fragmentShader 111', fragmentShader)
    // 着色器放入程序
    const program = createProgram(gl, vertextShader, fragmentShader)
    // 清空画布
    gl.clearColor(0, 0, 1, 1)
    // 清空颜色缓冲区
    gl.clear(gl.COLOR_BUFFER_BIT)
  </script>
</body>
</html>